<template>
  <div class="daohang">
    <el-row justify="space-around" gutter="24">
      <!-- 第一个导航项 -->
      <el-col :span="4">
        <div class="btn" @click="navigateTo('Page1Vue')">
          <div class="icon_div" :class="{ active: currentRoute === 'Page1Vue' }">
            <div class="icon_update">
              <svg t="1754900609106" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7708" width="40" height="40">
                <path d="M640 725.333333v-128h128v128h85.333333v128h-128v-128h-42.666666v128h-128v-128h85.333333z m213.333333-128h-85.333333v-51.2l-256-256-256 256V768h256v85.333333H170.666667v-298.666666H128l384-384 384 384h-42.666667v42.666666z" 
                  :fill="currentRoute === 'Page1Vue' ? '#ffffff' : '#6a717f'" p-id="7709"></path>
              </svg>
            </div>
          </div>
          <div class="icon_name" :class="{ active: currentRoute === 'Page1Vue' }">
            种植地登记
          </div>
        </div>
      </el-col>
      
      <!-- 第二个导航项 -->
      <el-col :span="4">
        <div class="btn" @click="navigateTo('Page2Vue')">
          <div class="icon_div" :class="{ active: currentRoute === 'Page2Vue' }">
            <div class="icon_update">
              <svg t="1754904388985" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9124" width="40" height="40">
                <path d="M512.5 942c-188.2 0-341.4-153.1-341.4-341.4 0-319.8 307.1-499 320.2-506.4L512.5 82l21.2 12.1c13.1 7.5 320.2 186.6 320.2 506.4 0 188.3-153.2 341.5-341.4 341.5z m0.1-760.2C447.7 226 256.5 375.4 256.5 600.6c0 141.2 114.8 256 256 256s256-114.8 256-256c0-226-191.1-374.8-255.9-418.8z" p-id="9125" :fill="currentRoute === 'Page2Vue' ? '#ffffff' : '#6a717f'" ></path>
                <path d="M512.5 813.9c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7c70.6 0 128-57.4 128-128 0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7c-0.1 117.7-95.8 213.4-213.4 213.4z" p-id="9126" :fill="currentRoute === 'Page2Vue' ? '#ffffff' : '#6a717f'"></path>
              </svg>
            </div>
          </div>
          <div class="icon_name" :class="{ active: currentRoute === 'Page2Vue' }">
            作物登记
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="btn" @click="navigateTo('AddProduct')">
          <div class="icon_div" :class="{ active: currentRoute === 'AddProduct' }">
            <div class="icon_update">
              <svg t="1762835385798" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6447" width="40" height="40">
                <path d="M498.621065 440.644683c-50.301877-31.486252-85.252745-80.683208-98.807508-138.736515-13.229081-58.053307-3.26681-117.745015 28.253409-168.419528l44.096936-70.843817V32.797971C472.162903 14.759586 486.861549 0 504.827005 0c17.965456 0 32.664101 14.759586 32.664101 32.797971v32.47029c87.702353 69.368258 111.220386 195.970622 50.792398 293.216656l-44.586458 71.665015c-6.043099 9.675551-16.332051 15.414946-27.763887 15.414946-6.043099 0-12.086197-1.640398-17.312094-4.920195z m-15.025326-272.388995c-22.211309 35.750088-29.234451 77.89593-19.760703 118.893892 6.858302 30.173534 21.883629 56.740589 43.605417 77.731091l25.47712-40.833124c20.578903-33.61817 28.091567-73.304414 20.905584-112.170458-5.880258-32.470291-21.721787-61.824624-44.913139-84.455524l-25.314279 40.834123zM273.376031 616.774681C394.660589 638.421541 476.010146 754.199477 454.64601 875.225288 451.687899 890.804074 438.04722 902.119024 422.270626 902.119024a36.004839 36.004839 0 0 1-5.917221-0.49152l-83.485471-14.759586C211.747216 865.548738 130.397659 749.607961 151.761795 628.74599l2.793272-15.742626V587.256507c0-18.038384 14.790556-32.797971 32.867903-32.79797 18.078345 0 32.868901 14.759586 32.868901 32.79797v20.170303l53.083161 9.347871z m118.983805 214.336687c-1.150876-32.634131-12.489803-64.120382-32.704062-90.194919-24.158408-31.322412-58.834544-52.313912-97.619669-59.201187l-47.659457-8.527672c1.314716 32.470291 12.489803 63.957541 32.704062 90.194919 24.158408 31.322412 58.834544 52.312913 97.619669 59.201187l47.659457 8.527672z m-118.983805-498.443239c121.284558 21.599906 202.634115 137.128086 181.269979 257.892152C451.687899 606.1061 438.04722 617.397073 422.270626 617.397073c-1.973073 0-3.945147-0.16384-5.917221-0.490521l-83.485471-14.727617C211.747216 580.905709 130.397659 465.214689 151.761795 344.613463l2.793272-15.708659v-30.437276c0-17.999422 14.790556-32.72704 32.867903-32.72704 18.078345 0 32.868901 14.727618 32.868901 32.728039v24.87271l53.083161 9.326892z m118.983805 213.874138c-1.150876-32.564199-12.489803-63.982517-32.704062-90.001108-24.158408-31.254478-58.834544-52.199024-97.619669-59.072312l-47.659457-8.50969c1.314716 32.400359 12.489803 63.818677 32.704062 90.001108 24.158408 31.254478 58.834544 52.199024 97.619669 59.072313l47.659457 8.509689z m480.241015 67.473109l2.63143 14.60174c21.377124 120.918915-60.019387 236.750798-181.211036 258.407649l-83.370584 14.60174c-1.808234 0.328679-3.781307 0.492519-5.75438 0.492519-15.951422 0-29.435255-11.320944-32.395364-26.906724-10.523723-58.73664 2.46759-117.9648 36.834029-166.694212 34.368437-48.892254 85.508496-81.37753 144.378006-91.713436l53.113132-9.351868v-20.180292c0-18.047376 14.799547-32.813955 32.887883-32.813955s32.887883 14.76558 32.887883 32.813955v26.742884z m-59.690709 59.06432l-47.686431 8.367828c-41.439532 7.21895-77.615204 30.352359-101.787598 64.806712-17.594818 24.938646-27.461182 54.470806-28.448218 84.659325l47.68743-8.531668c38.807102-6.89127 73.504219-27.891762 97.676613-59.22816 20.06041-26.251364 31.407329-57.588761 32.558204-90.074037z m-240.441194-82.683255c-10.490755-58.581791 2.622439-117.655102 36.881983-166.254642 34.258544-48.764379 85.23776-81.164738 143.921451-91.47367l52.945296-9.326892v-24.873709c0-17.999422 14.752593-32.72704 32.783984-32.72704 18.031391 0 32.783984 14.727618 32.783985 32.728039v31.417319l2.458599 14.727617c21.30919 120.601225-59.830572 236.129405-180.638595 257.728313l-83.10784 14.564776c-1.803239 0.326681-3.770318 0.490521-5.736398 0.490521-15.900472 0-29.341346-11.290974-32.292465-27.000632z m62.125331-44.017015l47.700418-8.673529c38.685221-6.873288 73.272445-27.818833 97.367914-59.073312 19.99847-26.181432 31.309424-57.436909 32.456304-89.837268l-47.700417 8.50969c-41.30766 7.199969-77.370443 30.272437-101.465913 64.636878-17.539871 24.87271-27.375266 54.326946-28.358306 84.437541zM512.999024 468.542439c18.132293 0 32.967805 14.72562 32.967805 32.722045v489.014447c0 17.997424-14.835512 32.722045-32.967805 32.722045s-32.967805-14.72562-32.967804-32.722045V501.264484C480.03122 483.26706 494.866732 468.542439 512.999024 468.542439z" :fill="currentRoute === 'AddProduct' ? '#ffffff' : '#6a717f'" p-id="6448"></path>
              </svg>
            </div>
          </div>
          <div class="icon_name" :class="{ active: currentRoute === 'AddProduct' }">
            农产品登记
          </div>
        </div>
      </el-col>

      <!-- 第三个导航项 -->
      <el-col :span="4">
        <div class="btn" @click="navigateTo('Page3Vue')">
          <div class="icon_div" :class="{ active: currentRoute === 'Page3Vue' }">
            <div class="icon_update">
              
              <svg t="1754904569205" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10701" width="40" height="40">
                <path d="M748.544 204.8q43.008-3.072 84.48 7.68t73.728 26.624 52.224 33.792 19.968 30.208-15.36 14.848-38.4 4.608-50.688 7.68-52.224 25.088q-16.384 12.288-31.232 27.136t-29.696 28.672-30.72 25.6-34.304 17.92q-9.216 3.072-22.528 6.144t-28.16 1.536-30.72-9.728-30.208-27.648q-9.216 12.288-15.872 29.184t-11.776 36.352-8.704 40.448-5.632 39.424q-2.048 15.36-3.072 38.4t-0.512 45.568 2.56 41.472 6.144 27.136q5.12 9.216 5.12 15.36 0 5.12-5.12 9.728t-19.456 4.608q-16.384 0-22.016-4.608t-5.632-9.728q-1.024-6.144 4.096-14.336 5.12-10.24 6.656-24.064t1.024-29.696-1.536-32.256-1.024-31.744q-16.384-32.768-31.744-55.296t-33.792-43.008q-11.264 24.576-26.112 36.864t-30.208 16.896-29.184 4.096-24.064-2.56q-18.432-3.072-34.816-11.776t-32.768-19.456-33.28-23.04-34.304-21.504q-26.624-15.36-54.784-16.384t-51.2 1.536-37.888 2.048-14.848-13.824 16.896-33.792 45.056-40.448 66.048-35.84 79.872-19.968q64.512-6.144 107.008 6.656t66.56 36.352 30.208 54.272-2.048 61.44q32.768 29.696 64.512 75.776 5.12-50.176 25.6-101.376 8.192-17.408 15.36-29.696t17.408-26.624q-16.384-29.696-16.896-63.488t19.456-63.488 61.952-50.688 110.592-25.088zM443.392 486.4q-57.344-49.152-120.832-63.488t-131.072 3.072q-2.048 0-1.024 0.512t3.072 0.512q29.696-3.072 60.416-2.56t61.952 9.216 61.952 25.6 60.416 45.568zM819.2 291.84q2.048 0 3.072-0.512t-2.048-0.512q-74.752-7.168-135.168 23.04t-106.496 88.576l10.24 17.408q27.648-37.888 56.832-62.464t59.392-38.912 58.88-19.968 55.296-6.656zM284.672 815.104q-8.192-7.168 5.12-16.896t38.912-19.968 57.856-20.992 61.952-18.944q13.312-4.096 20.992 0.512t14.336 11.776 16.384 13.824 28.16 6.656 28.16-6.656 16.896-13.312 14.336-11.264 20.48-1.536q29.696 8.192 62.464 19.456t58.88 22.016 39.424 20.48 3.072 14.848q-24.576 13.312-66.048 22.016t-90.112 12.8-100.352 4.096-97.792-4.608-81.92-13.312-51.2-20.992z" p-id="10702" :fill="currentRoute === 'Page3Vue' ? '#ffffff' : '#6a717f'"></path>
              </svg>
            </div>
          </div>
          <div class="icon_name" :class="{ active: currentRoute === 'Page3Vue' }">
            种植管理
          </div>
        </div>
      </el-col>
      
      <!-- 第四个导航项 -->
      <el-col :span="4">
        <div class="btn" @click="navigateTo('Page4Vue')">
          <div class="icon_div" :class="{ active: currentRoute === 'Page4Vue' }">
            <div class="icon_update">

              <svg t="1754904723924" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11878" width="40" height="40">
                <path d="M949.958168 366.917694c-0.064468-0.481977-0.157589-0.933255-0.255827-1.318018-0.388856-1.87265-0.904603-3.676739-1.641383-5.411243l-75.505671-187.960883c-13.0799-38.97671-50.636261-62.873979-94.572936-62.97324L247.996722 109.25431c-44.51689 0-79.109756 23.677259-91.64321 61.105706L75.178725 362.15011c-0.38374 1.12973-0.807389 2.800789-1.160429 4.511757-5.894244 18.101263-8.856715 36.686551-8.856715 55.339376 0.064468 65.581648 36.043914 125.46348 93.865831 156.290579 0 0 0 0.033769 0.033769 0.033769 0.028653 0 0.028653 0 0.028653 0.029676l0 0c0 0 0.034792 0 0.034792 0.033769 23.804149 12.691043 51.795667 19.130709 83.330894 19.130709 52.857858-0.157589 101.82306-23.382547 135.192052-63.134923 33.211403 39.429011 81.787748 62.491263 134.552485 62.815651 52.341089-0.417509 100.790544-23.577998 133.840264-62.97324 33.374108 39.749306 82.397638 62.875003 135.51644 62.875003 32.150234-0.157589 60.687174-6.925736 84.717474-20.098757 56.951083-31.118741 92.28687-90.7734 92.257194-155.681712C958.623525 402.675082 955.56691 383.957789 949.958168 366.917694L949.958168 366.917694zM835.445088 520.470929c-14.59337 7.990998-32.788777 12.082176-53.953819 12.21009-39.232536 0-74.989925-19.906375-95.865371-53.699016-1.479701-3.188622-3.962242-8.467859-8.596795-13.55983-5.318122-5.956665-14.981203-13.011338-30.891568-13.011338-12.824073 0-24.448832 5.249561-31.020504 13.299911-4.349051 4.89652-6.733355 9.761318-8.439206 13.30605-20.618597 33.367969-56.081273 53.471842-94.51256 53.762461-38.908148-0.226151-74.474179-20.260439-95.216595-53.890374-1.450025-2.963495-3.868097-7.957229-7.632841-12.17939-15.142885-18.067494-49.028647-17.134239-62.235436-1.385557-4.860704 5.317099-7.407714 10.665921-9.049097 14.303774-20.810978 33.374108-56.598043 53.378721-95.637174 53.506635-20.812001 0-38.624692-3.897773-52.991911-11.56643l-0.028653 0-0.033769 0c-36.85028-19.615757-59.753919-57.757448-59.783595-99.501178 0-12.338003 2.058892-24.772196 6.182816-36.883025 0.289596-0.86981 0.545422-1.833765 0.771573-2.835581l79.94989-189.017958c1.641383-4.831029 6.606465-19.552312 31.471782-19.552312L778.07445 173.777859c10.213619 0.60989 27.800159 2.412956 34.047444 20.805862l74.862012 186.411597c0.289596 1.352811 0.64366 2.645247 0.968048 3.707438 4.1536 12.144598 6.212492 24.481577 6.212492 36.719296C894.235053 462.683804 871.718223 500.627998 835.445088 520.470929L835.445088 520.470929zM859.602278 623.841228c-17.811668 0-32.209586 14.395872-32.209586 32.208563l0.064468 175.75284c0 9.983375-8.148587 18.10331-18.101263 18.131963l-606.069469 0.38988c-9.986445 0-18.101263-8.052396-18.101263-17.975397l-0.227174-172.718737c-0.033769-17.784038-14.465456-32.150234-32.213679-32.150234l-0.063445 0c-17.778922 0.033769-32.180933 14.464433-32.146141 32.278147l0.227174 172.624593c0 45.417399 37.010939 82.363869 82.524528 82.363869l606.161566-0.38374c45.455261-0.098237 82.432431-37.142945 82.432431-82.594113l-0.064468-175.71907C891.81698 638.237099 877.385293 623.841228 859.602278 623.841228L859.602278 623.841228zM763.904729 398.3598 248.511445 398.3598c-17.777899 0-32.213679-14.431687-32.213679-32.213679 0-17.783015 14.435781-32.213679 32.213679-32.213679l515.393283 0c17.812691 0 32.209586 14.430664 32.209586 32.213679C796.113291 383.928113 781.71742 398.3598 763.904729 398.3598L763.904729 398.3598zM763.904729 398.3598" :fill="currentRoute === 'Page4Vue' ? '#ffffff' : '#6a717f'" p-id="11879"></path>
              </svg>
            </div>
          </div>
          <div class="icon_name" :class="{ active: currentRoute === 'Page4Vue' }">
            发布上架
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 获取当前路由和路由器实例
const route = useRoute()
const router = useRouter()

// 用于存储当前路由名称
const currentRoute = ref('')

// 初始化时获取当前路由名称
onMounted(() => {
  currentRoute.value = route.name
})

// 监听路由变化，更新当前路由名称
watch(
  () => route.name,
  (newName) => {
    currentRoute.value = newName
  }
)

// 路由跳转方法
const navigateTo = (pageName) => {
  router.push({ name: pageName })
}
</script>

<style scoped>
.daohang{
  margin: 20px 0;
  height: 150px;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: rgba(209, 209, 209, 0.438) 5px 5px 10px;
}
.btn{
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer; /* 增加鼠标指针样式，提示可点击 */
}
.icon_update{
  width: 40px;
  height: 40px;
  overflow: hidden;
}
.icon_div{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #f3f4f6; /* 默认背景色 */
  transition: background-color 0.3s ease; /* 平滑过渡效果 */
}
/* 选中状态的样式 */
.icon_div.active {
  background-color: #2e7d32;
}
.icon_name{
  font-size: 20px;
  margin-top: 10px;
  color: #6a717f; /* 默认字体颜色 */
  transition: color 0.3s ease; /* 平滑过渡效果 */
}
/* 选中状态的文字样式 */
.icon_name.active {
  color: #2e7d32;
}
</style>
